<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>签到</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper-4.3.5.min.css">
</head>
<body>
    <div class="out-img-size" style="position: absolute;opacity: 1;z-index: 90;margin-left: 1.25rem;pointer-events: none;margin-top: 0.3rem;">
       <img src="" style="pointer-events: none;"  id="showImgs" alt="">
    </div>
    <!-- <div style="position: absolute;opacity: 0;">
        <canvas  id="myCanvas" style=" margin-top: 0.3rem;margin-left: 1.25rem;pointer-events: none"></canvas>
    </div> -->
    <div style="position: absolute;opacity: 0;width: 100%;z-index: 0;">
        <div class="date" id="dateImgS"  >
            <div class="item">
                <p>25</p>
                <p>2019.11</p>
            </div>
            <div class="item">
                <p>周一</p>
                <p>Monday</p>
            </div>
        </div>
        <div class="info flex" id="userInfo">
            <img src="img/1.png" alt="">
            <div>
                <p>07:30 <span>累计打卡 <span class="number">15</span> 天</span> </p>
                <p>12458人正在参与，比36%的人起得早</p>
            </div>
        </div>
    </div>
    <div class="top" >
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div id="imgmerge"  >
                        <img src="img/1.png" class="allImgList"  alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div id="imgmerge"  >
                        <img src="img/2.png" class="allImgList" alt="">
                        
                    </div>
                </div>
                <div class="swiper-slide">
                    <div id="imgmerge" >
                        <img src="img/3.png"  class="allImgList" alt="">
                        
                    </div>
                </div>
                <div class="swiper-slide">
                    <div id="imgmerge" >
                        <img src="img/4.png"  class="allImgList" alt="">
                        
                    </div>
                </div>
                <div class="swiper-slide">
                    <div id="imgmerge">
                        <img src="img/5.png" class="allImgList"   alt="">
                        
                    </div>
                </div>
                <div class="swiper-slide">
                    <div id="imgmerge">
                        <img src="img/6.png" class="allImgList" alt="">
                        
                    </div>
                </div>
                <div class="swiper-slide">
                    <div id="imgmerge">
                        <img src="img/7.png" class="allImgList" alt="">
                        
                    </div>
                </div>
            </div>
        </div>
        <p class="line">—— <span>长按上图保存图片，或发送给朋友</span> ——</p>
    </div>
    <div class="bottom">
        <div class="swiper-container1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/1.png" alt="">
                    <span class="check"></span>
                </div>
                <div class="swiper-slide">
                    <img src="img/2.png" alt="">
                    <span class="check"></span>
                </div>
                <div class="swiper-slide">
                    <img src="img/3.png" alt="">
                    <span class="check"></span>
                </div>
                <div class="swiper-slide">
                    <img src="img/4.png" alt="">
                    <span class="check"></span>
                </div>
                <div class="swiper-slide">
                    <img src="img/5.png" alt="">
                    <span class="check"></span>
                </div>
                <div class="swiper-slide">
                    <img src="img/6.png" alt="">
                    <span class="check"></span>
                </div>
                <div class="swiper-slide">
                    <img src="img/7.png" alt="">
                    <span class="check"></span>
                </div>
            </div>
        </div>
    </div>
    
    
</body>
<script src="lib/jquery.min.js"></script>
<script src="lib/swiper.js"></script>
<script src="./js/html2canvas.js"></script>
<script src="./lib/rem.js"></script>
<script src="js/index.js"></script>
</html>